<template>
  <div style="padding-top:2rem;padding-bottom:2rem;">
    <div>
      <TopNav title="RemoveWatermarkPage.dyqsy" show_left="true"></TopNav>
      <div>
        <nut-row type="flex" gutter="10" align="left">
          <nut-col :span="24" style="margin-bottom:0.5rem;">
            <div style="text-align: center;">
              <nut-textinput
                v-model="url"
                label="$t('RemoveWatermarkPage.splj')："
                placeholder="$t('RemoveWatermarkPage.qztsplj')"
                :clearBtn="false"
              />
            </div>
          </nut-col>
        </nut-row>
        <nut-row type="flex" gutter="10" align="left">
          <nut-col :span="6"style="margin-bottom:0.5rem;text-align: left">
            {{ $t('RemoveWatermarkPage.cljg') }}:
          </nut-col>
          <nut-col :span="18"style="margin-bottom:0.5rem;text-align: left;">
            <div v-if="deal_res==1" style="margin-bottom:0.2rem;">
              <img src="/static/img/pass.png" alt="">
              {{ $t('RemoveWatermarkPage.cg') }}
            </div>
            <div v-else-if="deal_res==-1" style="margin-bottom:0.2rem;">
              <img src="/static/img/fail.png" alt="">
              {{ $t('RemoveWatermarkPage.sb') }}
            </div>
            <div v-else style="margin-bottom:0.2rem;">
              <img src="/static/img/wait.png" alt="">
              {{ $t('RemoveWatermarkPage.ddcl') }}
            </div>
          </nut-col>
        </nut-row>
        <nut-row type="flex" gutter="10" align="left">
          <nut-col :span="24"style="margin-bottom:0.5rem;text-align: center;">
            <video controls style="width:90%;" v-if="video_url" :src="video_url"></video>
          </nut-col>
        </nut-row>
        <nut-row v-if="!video_url" type="flex" gutter="10" align="left">
          <nut-col :span="24" style="margin-bottom:0.5rem;">
            <button :disabled="loading"  @click="handleClickSubmit" class="btn">{{ $t('RemoveWatermarkPage.hq') }}</button>
          </nut-col>
        </nut-row>
        <nut-row v-else type="flex" gutter="10" align="left">
          <nut-col :span="24"style="margin-bottom:0.5rem;">
            <button :disabled="loading"  @click="handleClickDownload" class="btn">{{ $t('RemoveWatermarkPage.xz') }}</button>
          </nut-col>
        </nut-row>
        <nut-row type="flex" gutter="10" align="left">
          <nut-col :span="24"style="margin-bottom:0.5rem;">
            <button style="background: #999;" @click="handleClickReset" class="btn">{{ $t('RemoveWatermarkPage.zz') }}</button>
          </nut-col>
        </nut-row>
      </div>
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";
import helper from "../utils/helper";

export default {
  name: 'RemoveWatermark',
    components: {MainNav,TopNav},
    data () {
    return {
        loading:false,
        curr_img:'',
        showImgReview:false,
        select_type:"1",
        data:{
          username:'',
          img_arr:[],
          status:-2,
          bind_info:''
        },
        user:{},
        url: '',
        video_url: '',
        download_url: '',
        deal_res: 0,
    }
  },
    methods:{
        shiftTab(index){

        },
        uploadImgs(args){
            console.log(args,this.imgList);
            this.data.imgs = args.msg;
        },
        handleClickRefresh(){
            this.loadingBind = true;
            this.$axios.post(this.$api_url.bind_refresh,{
                type:this.select_type
            }).then((res)=>{
                let data = res.data;
                if(data.code == 0){
                    this.getData();
                    this.$toast.success(data.msg);
                } else{
                    this.$toast.fail(data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                this.loadingBind=false;
            })
        },
        handleClickSubmit(){
            if(this.url != "" && this.url.length>5){
                this.loading = true;
                this.$axios.post(this.$api_url.get_douyin_url,{
                    url: this.url
                }).then((res)=>{
                    let data = res.data;
                    if(data.code == 0){
                        this.deal_res = 1;
                        this.video_url = data.data;
                        this.$toast.success(data.msg);
                    } else{
                        this.deal_res = -1;
                        this.$toast.fail(data.msg);
                    }
                }).catch((err)=>{
                    this.deal_res = -1;
                    this.$toast.fail(err.message);
                }).then(()=>{
                    this.loading=false;
                })
            } else{
                this.$toast.warn(this.$t('RemoveWatermarkPage.qtrsplj'));
            }
        },
        handleClickReset() {
          this.video_url = "";
          this.download_url = "";
          this.url = "";
        },
        handleClickDownload(){
            if(this.video_url != "" && this.video_url.length>5){
                window.open(this.video_url);
            } else{
                this.$toast.warn(this.$t('RemoveWatermarkPage.qtrsplj'));
            }
        },
        copyHere(){
            let clipboard = new this.$clipboard("#btn-qq");
            clipboard.on('success', ()=> {
                this.$toast.success(this.$t('RemoveWatermarkPage.fzcg'));
            });
            clipboard.on('error', ()=> {
                this.$toast.fail(this.$t('RemoveWatermarkPage.fzsb'));
            });
        },
        getData(){
            this.$axios.get(this.$api_url.bind_record+"?type="+this.select_type).then((res)=>{
                let data = res.data;
                if(data){
                    this.data.bind_info = data.info;
                    this.data.username = data.username;
                    this.user = data.user;
                    if(data.imgs){
                        this.data.img_arr = data.imgs.split(",");
                    }
                    this.data.status = data.status;
                    this.data.reply = data.reply;
                } else{
                    this.data.status = -2;
                    this.data.img_arr = [];
                    this.data.username = "";
                    this.data.bind_info = "";
                }
            })
        },
        handleClickReview(url){
            this.curr_img = url;
            this.showImgReview = true;
        },
        handleClickViewHelp(){
            this.showHelpView = true;
        },
        handleClickCloseReview(){
            this.showImgReview = false;
        },
        handleClickUnbind(){
            let __this = this;
            this.$dialog({
                title: "确定解绑吗?",
                onOkBtn(event) {  //确定按钮点击事件
                    this.close(); //关闭对话框
                    let loading = this.$toast.loading();
                    __this.$axios.post(this.$api_url.unbind_account,__this.$qs.stringify({
                        type: __this.select_type
                    })).then((res)=>{
                        if(res.data.code === 0){
                            __this.$toast.success(res.data.msg);
                            __this.getData();
                        } else{
                            __this.$toast.fail(res.data.msg);
                        }
                    }).catch((err)=>{
                        __this.$toast.fail(err.message);
                    }).then(()=>{
                        loading.hide();
                    })
                },
            });
        },
    },
    watch:{
      select_type(val){
          this.getData();
      }
    },
    mounted() {
      this.getData();
      let token = helper.getToken();
      this.help_url = this.$api_url.server+"/buyer/help/get_row?api_token="+token+"&id=21";
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  body{
    background-color: transparent;
  }
  #app{
    margin-top:0;
  }
  .empty-box ul{
    padding:0;
    margin:0;
    list-style: none;
  }
  .empty-box ul li{
    margin-bottom:1.2rem;
  }
  .row-img{
    width:50px;
    height:50px;
    border:thin dashed #ccc;
    padding:0.2rem;
    border-radius: 0.5rem;
    margin-right:0.5rem;
    margin-bottom:0.5rem;
  }
  .img-review{
    padding: 1rem;
  }
  .img-review img{
    max-height:10rem;
    max-width:16rem;
  }
  .bind-info{
    text-align: left;
    padding: 1rem;
    position: relative;
    color:#333;
    font-size: 0.5rem;
  }
  .bind-info .bg{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*background-image: url("/static/img/bind_bg.jpeg");*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #fff;
    -webkit-filter: blur(25px);
    filter: blur(15px);
    z-index: -2;
  }
  .bind-info img{
    height:3rem;
    width:3rem;
    border-radius: 50%;
    margin-bottom:0.5rem;
  }
  .stat-info ul{
    overflow: hidden;
    margin-top:0.7rem;
  }
  .stat-info ul li{
    float:left;
    width:33%;
    text-align: left;
    text-align: center;
  }
  .refresh{
    float:right;
  }
  .unbind{
    border: thin dashed #fd6868;
    display: inline-block;
    padding: 0.2rem 0.8rem;
    color: #fd6868;
    border-radius: 0.6rem;
  }
  .verify-fail{
    margin-top:0.2rem;
  }
  .btn{
    font-size: .426667rem;
    line-height: 1.12rem;
    border-radius: .106667rem;
    background-color: #2f3848;
    color: #fff;
    width: 90%;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: .4rem;
  }
  .btn:disabled{
    background: #ccc;
  }
  #btn-qq{
    border-radius: 0.1rem;
    padding: 0.05rem;
    background: #f37676;
    color: #fff;
  }
</style>
